<script setup lang="ts">
import { edgeCloud1, edgeCloud2, edgeCloud3, edgeCloud4 } from "./egdeCloud";
import {
  dataCleaning,
  dataDimenRedu,
  dataFusion,
  dataEstimation,
  ontologyConstruction,
  ontologyInstantiation
} from "./dataProcessing";
import { DevConnection } from "./resourceAccess";
import { useNav } from "@/layout/hooks/useNav";
import { ref, reactive,shallowRef } from "vue";
const { isCollapse } = useNav();

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "resourceAccess"
});
const currentMenu = ref<string>("org");
const toComponent = shallowRef(DevConnection);

const menuList = shallowRef([
  { key: "panel1", name: "算力分配", show: true, component: edgeCloud1 },
  { key: "panel2", name: "模型压缩", show: true, component: edgeCloud2 },
  { key: "panel3", name: "模型迁移", show: true, component: edgeCloud3 },
  { key: "panel4", name: "参数优化", show: true, component: edgeCloud4 },
  {
    key: "dataCleaning",
    name: "数据清洗",
    show: true,
    component: dataCleaning
  },
  {
    key: "dataDimenRedu",
    name: "数据降维",
    show: true,
    component: dataDimenRedu
  },
  { key: "dataFusion", name: "数据融合", show: true, component: dataFusion },
  {
    key: "dataEstimation",
    name: "状态估计",
    show: true,
    component: dataEstimation
  },
  {
    key: "ontologyConstruction",
    name: "本体构建",
    show: true,
    component: ontologyConstruction
  },
  {
    key: "ontologyInstantiation",
    name: "标识赋码",
    show: true,
    component: ontologyInstantiation
  },
  {
    key: "DevConnection",
    name: "资源接入",
    show: true,
    component: DevConnection
  }
]);

const page_key = ref(<string>"");
const category = ref(<string>"");

const thirdMenuItem1 = ref(null),
  thirdMenuItem2 = ref(null);
function menuClick(key: string) {
  page_key.value = key;
  menuList.value.filter((item: any) => {
    if (item.key == page_key.value) {
      currentMenu.value = key;
      toComponent.value = item.component;
    }
  });

  // 如果点击的不是 "协同计算"，则隐藏 isThird
  // 导航栏显示的逻辑
  if (page_key.value == "xtjs" || page_key.value == "DataPreprocess") {
    isThird.value = !isThird.value;
    category.value = page_key.value;
    // 点击子菜单默认激活项目
    if (page_key.value == "DataPreprocess") {
      thirdMenuItem1.value.$el.click();
    } else if (page_key.value == "xtjs") {
      thirdMenuItem2.value.$el.click();
    }
    //是三级导航
  } else if (Judge_Third(page_key.value)) {
    //三级页面，什么都不做
    console.log("什么都不做");
  } else {
    //其他二级导航
    isThird.value = false;
  }
}
//写这个函数的目的在于，点三级页面的时候不要收起三级导航条，点二级页面的时候需要收起导航条
function Judge_Third(page_key: string) {
  const panelKeys = [
    //如果是三级页面的话要加到这个列表
    "panel2",
    "panel3",
    "panel4",
    "dataEstimation",
    "dataDimenRedu",
    "dataCleaning",
    "dataFusion"
  ];
  if (panelKeys.includes(page_key)) {
    return true;
  } else {
    return false;
  }
}
const subMenu1Item = ref(null);
const handleOpen = (key: string, keyPath: string[]) => {
  isThird.value = false; //点击下拉导航栏的时候需要收起三级导航条
  if (key == "sub-menu1") {
    subMenu1Item.value.$el.click();
  }
};
const handleClose = e => {
  console.log(e);
  isThird.value = false;
};
const isThird = ref(false);
function handle_collapse(isCollapse: Boolean) {
  //用于根据isThird和isCollapse调整panel页面的大小
  let w_type: string = "";
  if (isCollapse) {
    if (isThird.value == true) {
      //先判断导航栏是否折叠，在判断是否是三级页面
      w_type = "tw";
    } else {
      w_type = "dw";
    }
    return w_type;
  } else {
    isThird.value = false; //如果导航栏展开，三级导航也要关闭
    w_type = "hw";
    return w_type;
  }
}
</script>

<template>
  <div id="edgecloud">
    <div
      v-if="isCollapse"
      class="w-[160px] h-screen bg-[#fff] absolute overflow-hidden absolute top-0 left-0 p-[20px]"
      :class="isCollapse ? 'menu' : ''"
    >
      <!-- menu_list -->
      <div class="w-[120px] text-center">
        <span
          class="text-[18px] h-[60px] leading-[60px] text-center font-weight:400px"
          >资源接入引擎</span
        >

        <!-- 全要素资源接入 -->
        <el-menu
          class="menu_first"
          @open="handleOpen"
          @close="handleClose"
          :default-openeds="['sub-menu1']"
          :unique-opened="true"
        >
          <!-- 资源接入界面 -->
          <el-sub-menu
            index="sub-menu1"
            expand-close-icon=" "
            expand-open-icon=" "
          >
            <template #title>
              <span>资源接入</span>
            </template>
            <el-menu-item
              ref="subMenu1Item"
              index="DevConnection"
              style="display: none"
              @click="menuClick('DevConnection')"
              />
          </el-sub-menu>
          <!-- 数据处理页面 -->
          <el-sub-menu index="sub-menu2" class="sub-menu">
            <template #title>
              <span>数据处理</span>
            </template>
            <!-- 二级菜单 -->
            <div>
              <el-menu-item
                index="DataPreprocess"
                @click="menuClick('DataPreprocess')"
              >
                数据预处理
              </el-menu-item>
              <el-menu-item
                index="ontologyConstruction"
                @click="menuClick('ontologyConstruction')"
              >
                数据标准化
              </el-menu-item>
              <el-menu-item
                index="ontologyInstantiation"
                @click="menuClick('ontologyInstantiation')"
              >
                标识赋码
              </el-menu-item>
            </div>
          </el-sub-menu>
          <!-- 云边协同 -->
          <el-sub-menu index="sub-menu3">
            <template #title>
              <span>云边协同</span>
            </template>
            <div>
              <el-menu-item index="panel1" @click="menuClick('panel1')">
                算力分配
              </el-menu-item>
              <el-menu-item index="xtjs" @click="menuClick('xtjs')">
                协同计算
              </el-menu-item>
            </div>
          </el-sub-menu>
        </el-menu>
      </div>
    </div>
    <!-- 三级页面导航条 -->
    <div
      class="h-screen bg-[#fff] overflow-hidden third_nav ml-auto"
      v-show="isThird"
    >
      <!-- 数据预处理三级导航栏 -->
      <div v-show="category == 'DataPreprocess'">
        <el-menu class="third_menu">
          <el-menu-item
            ref="thirdMenuItem1"
            index="dataCleaning"
            class="third_menu_item"
            @click="menuClick('dataCleaning')"
          >
            数据清洗
          </el-menu-item>
          <el-menu-item
            index="dataDimenRedu"
            class="third_menu_item"
            @click="menuClick('dataDimenRedu')"
          >
            数据降维
          </el-menu-item>
          <el-menu-item
            index="dataFusion"
            class="third_menu_item"
            @click="menuClick('dataFusion')"
          >
            数据融合
          </el-menu-item>
          <el-menu-item
            index="dataEstimation"
            class="third_menu_item"
            @click="menuClick('dataEstimation')"
          >
            状态估计
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 协同计算 -->
      <div v-show="category == 'xtjs'">
        <el-menu class="third_menu">
          <el-menu-item
            ref="thirdMenuItem2"
            index="panel3"
            class="third_menu_item"
            @click="menuClick('panel3')"
          >
            模型迁移
          </el-menu-item>
          <el-menu-item
            index="panel4"
            class="third_menu_item"
            @click="menuClick('panel4')"
          >
            参数优化
          </el-menu-item>
          <el-menu-item
            index="panel2"
            class="third_menu_item"
            @click="menuClick('panel2')"
          >
            模型压缩
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <!-- 调整页面的宽度 -->
    <div :class="handle_collapse(isCollapse)" class="ml-auto">
      <keep-alive>
        <component :is="toComponent" />
      </keep-alive>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// :deep(.menu_item1) {
//   margin-bottom: 10px;
//   background-color: #ffffff !important;
//   color: black !important;
//   border-radius: 8px !important;
// }
// :deep(.menu_item1.is-active) {
//   background-color: rgb(52, 150, 246) !important;
//   border-radius: 8px;
//   .menu_item_title {
//     color: #fff;
//     font-weight: lighter !important; //！！这里还没调好，没想好更好的方法
//     font-size: 16px;
//   }
// }

:deep(.el-card) {
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
}
// 二级菜单
:deep(.sub-menu) {
  margin-bottom: 10px;
}
:deep(.el-sub-menu__title) {
  background-color: transparent !important;
  color: black !important;
  border-radius: 8px;
  font-size: 16px !important;
  margin-bottom: 10px !important;
}
:deep(.el-sub-menu.is-opened > .el-sub-menu__title) {
  background-color: rgb(52, 150, 246) !important;
  color: white !important;
}
:deep(.el-menu--vertical > .el-sub-menu.is-active.is-opened) {
  .el-sub-menu__title {
    background-color: rgb(52, 150, 246) !important;
    color: white !important;
    .el-icon {
      color: white !important;
    }
  }
}
:deep(.el-menu--vertical > .el-sub-menu.is-active) {
  .el-sub-menu__title {
    color: black !important;
    .el-icon {
      color: black !important;
    }
  }
}
:deep(.el-sub-menu > .el-menu--inline) {
  background-color: rgb(242, 243, 245) !important;
  // margin-top: 10px !important;
  border-radius: 8px;
  --el-menu-level: 0 !important;
  .el-menu-item {
    background-color: transparent !important;
    color: black !important;
    font-size: 16px !important;
  }
  .el-menu-item.is-active {
    color: rgb(12, 120, 225) !important;
    font-weight: bold !important;
  }
}
// 三级菜单,但与二级菜单又千丝万缕的联系
:deep(.el-menu-item) {
  background-color: transparent !important;
  color: black !important;
  font-size: 16px !important;
}
:deep(.el-menu.el-menu--vertical > .el-menu-item.is-active) {
  color: rgb(12, 120, 225) !important;
  font-weight: bold !important;
}

.menu {
  animation: closed 0.5s ease-in-out;
  border-right: 2px solid rgb(240, 244, 248);
}
:deep(.menu_first) {
  border-right: 0;
}
.third_nav {
  width: 120px;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  left: 160px;
}
:deep(.third_menu) {
  margin-top: 100px;
  border: 0;
}
.tw {
  width: calc(100% - 280px);
  animation: closed 0.5s ease-in-out;
}
</style>
